<template>
	<view class="navgationBar" :style="{height:zhanHeight}">
		<view class="bar-box">
			<view class="bar-top" :style="{height:barH,backgroundColor:barBgc||backgroundColor}"></view>
			<view class="bar-content" :style="{backgroundColor}" v-if="!hideContent">
				<view class="icon-box item-box" @click="goback">
					<image src="../static/houtui.png" mode="widthFix" class="icon" v-if="!hideIcon"></image>
				</view>
				<view class="item-box">
					{{title||""}}
				</view>
				<slot></slot>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				barH:0
			}
		},
		props:["s"],
		methods:{
			goback(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		mounted() {
		},
		mounted() {
			let me=this
			uni.getSystemInfo({
				success(res) {
					console.log(res.statusBarHeight)
					me.barH=res.statusBarHeight+"px"
				}
			})
		},
		props:["barBgc","backgroundColor","title","hideIcon","hideContent"],
		computed:{
			zhanHeight(){
				if(this.hideContent){
					return this.barH
				}else{
					let h=parseInt(this.barH)+44+"px"
					return h
				}
				
			}
		}
	}
</script>

<style scoped>
.bar-top{
	top: 0;
	z-index: 9;
	width: 100%;
}
.bar-content{
	height: 44px;
	display: flex;
	align-items: center;
}
.icon{
	width: 16px;
}
.bar-box{
	position: fixed;
	top: 0;
	width: 100%;
}
.item-box{
	display: flex;
	align-items: center;
	padding: 0 5upx;
	height: 100%;
}
.icon-box{
	width: 14px;
}
</style>
